{% load i18n %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>{% trans "Kolibri is starting" %}</title>

    <style>
      html, body {
        font-family: 'Noto Sans', sans-serif;
        color: #212121;
        margin: 0;
      }
      h1 {
        font-size: 24px;
      }
      p {
        font-size: 16px;
      }
      {% if reload %}
      a {
        color: #212121;
        -webkit-transition: color .25s ease;
        transition: color .25s ease;
      }
      a:hover {
        color: black;
      }
      button {
        padding: 0 16px;
        font-family: 'Noto Sans', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 36px;
        border: 0;
        border-radius: 2px;
        background-color: rgb(238, 238, 238);
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
        box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
        color: rgb(33, 33, 33);
        cursor: pointer;
        text-transform: uppercase;
        -webkit-transition: background-color .25s ease;
        transition: background-color .25s ease;
      }
      button:hover {
        background-color: rgb(238, 238, 238);
      }
      {% endif %}
      .center-outer {
        display: table;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .center-inner {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
        top: -40px; /* visual weight offset to balance logo */
        padding: 48px; /* 8px larger than offset */
      }
      .header {
        position: relative;
      }
      .button {
        margin-top: 24px;
      }
      {% if version %}
      .version {
        font-size: 12px;
        color: rgb(97, 97, 97);;
      }
      {% endif %}
    </style>
  </head>
  <body class="center-outer">
    <div class="center-inner">

      {% include "kolibri/loading_snippet.html" %}

      <h1 class="header">{% trans "Starting Kolibri" %}</h1>
      {% if reload %}
      <p>{% trans "You should be automatically redirected when Kolibri is ready" %}</p>
      <p><a href="https://community.learningequality.org/c/support/kolibri">{% trans "If not, please ask for help in our community forums" %}</a></p>
      <p><button class="button" onClick="location.reload();">{% trans "Refresh page" %}</button></p>
      {% endif %}
      {% if version_text %}
      <p class="version">{{ version_text }}</p>
      {% endif %}
    </div>

    {% if reload %}
    <script>
        function retry() {
        var req = new XMLHttpRequest();  // use it instead of fetch for IE11 compatibility
        var latest_url = location.href;
        req.open('GET', latest_url, true);
        req.timeout = 1000;
        req.onload = function() {
          setTimeout(retry, 2000);
        }
        req.ontimeout = function() {
          setTimeout(retry, 2000);
        }
        req.onerror = function() {
          setTimeout(retry, 2000);
        }
        req.send(null);
      }

      retry();
    </script>
    {% endif %}
  </body>
</html>
